<template>
  <div>
    <TableSearch :query="query" :options="searchOpt" :search="handleSearch"/>
    <div class="container">
      <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
                   :delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
        <template #toolbarBtn>
          <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
        </template>
      </TableCustom>

    </div>
    <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
               :close-on-click-modal="false" @close="closeDialog">
      <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData"/>
    </el-dialog>
    <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
      <TableDetail :data="viewData"></TableDetail>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="system-user">
import {ref, reactive} from 'vue';
import {ElMessage} from 'element-plus';
import {CirclePlusFilled} from '@element-plus/icons-vue';
import {User} from '@/types/user';

import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import TableSearch from '@/components/table-search.vue';
import {FormOption, FormOptionList} from '@/types/form-option';
import * as  userApi from "./api/userApi"
// 查询相关
const query = reactive({
  name: '',
  pageSize: "",
  pageNum: ""

});
const user = reactive({
  "userName": "",
  "userPassword": "",
  "userAccount": "",
  "userType": "",
  "userStatus":"",
  "roleList": []

});
const searchOpt = ref<FormOptionList[]>([
  {type: 'input', label: '用户名：', prop: 'name'}
])
const handleSearch = () => {
  changePage(1);
};

// 表格相关
let columns = ref([
  {type: 'userId', label: '序号', width: 55, align: 'center'},
  {prop: 'userName', label: '用户名'},
  {prop: 'userAccount', label: '用户名'},
  {prop: 'userType', label: '用户名'},
  {prop: 'creatAt', label: '创建时间'},
  {prop: 'userStatus', label: '状态'},

  {prop: 'operator', label: '操作', width: 250},
])
const page = reactive({
  index: 1,
  size: 10,
  total: 0,
})
const tableData = ref<user[]>([]);
const getData = async () => {
  const res = await userApi.pageQueryUser(query)
  tableData.value = res.data.records;
  page.total = res.data.pageTotal;
};
getData();

const changePage = (val: number) => {
  page.index = val;
  getData();
};

// 新增/编辑弹窗相关
let options = ref<FormOption>({
  labelWidth: '100px',
  span: 12,
  list: [
    {type: 'input', label: '用户名ID', prop: 'userId', required: true},
    {type: 'input', label: '用户名', prop: 'userName', required: true},
    {type: 'input', label: '密码', prop: 'userPassword', required: true},
    {type: 'input', label: '账户名', prop: 'userAccount', required: true},
    {type: 'input', label: '用户类型', prop: 'userType', required: true},
    {type: 'input', label: '用户状态', prop: 'userStatus', required: true},
    {type: 'input', label: '创建时间', prop: 'creatAt', required: true}
  ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});
const handleEdit = (row: User) => {
  rowData.value = {...row};

  isEdit.value = true;
  visible.value = true;
};
const updateData = () => {

    console.log(rowData.value)
  closeDialog();
  getData();
};

const closeDialog = () => {
  visible.value = false;
  isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
  row: {},
  list: []
});
const handleView = (row: User) => {
  viewData.value.row = {...row}
  viewData.value.list = [
    {
      prop: 'userId',
      label: '用户ID',
    },
    {
      prop: 'userName',
      label: '用户名',
    },
    {
      prop: 'userPassword',
      label: '密码',
    },
    {
      prop: 'userAccount',
      label: '账户名',
    },
    {
      prop: 'userType',
      label: '用户类型',
    },
    {
      prop: 'creatAt',
      label: '创建时间',
    },
    {
      prop: 'userStatus',
      label: '状态',
    },
  ]
  visible1.value = true;
};

// 删除相关
const handleDelete = (row: User) => {
  ElMessage.success('删除成功');
}
</script>

<style scoped></style>